<template>
  <div id="app">
    <Navbar />
    <router-view></router-view>
  </div>
</template>

<script setup>
import Navbar from '@/components/Navbar.vue';
</script>

<style>
:root {
  --primary-color: #333333;
  --secondary-color: #4CAF50;
  --accent-color: #FF9800;
  --light-color: #f8f8f8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: var(--light-color);
  color: var(--primary-color);
}

#app {
  min-height: 100vh;
}

/* 全局按钮样式 */
.el-button--primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.el-button--primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 全局链接样式 */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
}

/* 全局卡片样式 */
.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.15);
}

/* 全局输入框样式 */
.el-input__inner:focus {
  border-color: var(--primary-color) !important;
}

/* 全局表格样式 */
.el-table th {
  background-color: var(--primary-light) !important;
  color: white !important;
}

/* 全局导航菜单样式 */
.el-menu-item.is-active {
  background-color: var(--primary-light) !important;
  color: white !important;
}

.el-menu-item:hover {
  background-color: var(--primary-light) !important;
  color: white !important;
}
</style>
